<!DOCTYPE html>
<html>
  <head>
    <title>爱迪梦|故事汇|首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="爱迪梦|故事汇">

    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">

    <style>
      .swiper-container {
        width: 100%;
      } 

      .swiper-container img {
        display: block;
        width: 100%;
      }
      .my-flexgrid {
        width:95%;
        height:190px;
        margin:0 auto;
      }
      .my-flexgrid img{
        display:block;
        width:100%;
        height:100%;
      }
      .my-flexgrid + .my-flexgrid-label{
        margin-top:5px;
      }
      .my-flexgrid-label{
        display:block;
        text-align:center;
        color:#000000;
        font-size:16px;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
      }      
    </style>
  </head>

  <body ontouchstart>

    <div class="weui-tab">
      <div class="weui-tab__bd">
<!-- 首页 begin -->
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!-- AD begin -->
          <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="../ad/ad-1.png" /></div>
              <div class="swiper-slide"><img src="../ad/ad-2.png" /></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
          </div>
<!-- AD end -->
<!-- searchbox begin -->
          <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" action="#">
              <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
              </div>
              <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
              </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
          </div>
<!-- searchbox end -->
<!-- 模块 begin -->
<div class="weui-flex">
      <div class="weui-flex__item">
        <a href="">
        <div class="my-flexgrid">
          <img src="images/avatar1.jpg" alt="">
        </div>
        <p class="my-flexgrid-label">
          推荐系列故事
        </p>
      </a>
      </div>
      <div class="weui-flex__item">
        <a href="">
        <div class="my-flexgrid">
          <img src="images/avatar1.jpg" alt="">
        </div>
        <p class="my-flexgrid-label">
          故事汇排行榜
        </p>
      </a>
      </div>
</div>
<div class="weui-flex">
      <div class="weui-flex__item">
        <a href="">
        <div class="my-flexgrid">
          <img src="images/avatar1.jpg" alt="">
        </div>
        <p class="my-flexgrid-label">
          专题系列故事
        </p>
      </a>
      </div>
      <div class="weui-flex__item">
        <a href="">
        <div class="my-flexgrid">
          <img src="images/avatar1.jpg" alt="">
        </div>
        <p class="my-flexgrid-label">
          精品故事汇总
        </p>
      </a>
      </div>
</div>
<!-- 模块 end -->
        </div>
<!-- 首页 end -->
        <div id="tab2" class="weui-tab__bd-item">
          <h1>页面二</h1>
        </div>

        <div id="tab3" class="weui-tab__bd-item">
          <h1>页面三</h1>
        </div>
      </div>

      <div class="weui-tabbar">
        <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
          <div class="weui-tabbar__icon">
            <img src="./images/icon_nav_home.png" alt="">
          </div>
          <p class="weui-tabbar__label">主页</p>
        </a>
        <a href="#tab2" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img src="./images/icon_nav_mic.png" alt="">
          </div>
          <p class="weui-tabbar__label">讲故事</p>
        </a>
        <a href="#tab3" class="weui-tabbar__item">
          <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">3</span>
          <div class="weui-tabbar__icon">
            <img src="./images/icon_nav_me.png" alt="">
          </div>
          <p class="weui-tabbar__label">我</p>
        </a>
      </div>
    </div>

<script type="text/javascript" charset="utf-8" src="../lib/jquery-2.1.4.js"></script>
<script type="text/javascript" charset="utf-8" src="../lib/fastclick.js"></script>
<!--
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
-->
<script type="text/javascript" charset="utf-8" src="../js/jquery-weui.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/swiper.js"></script>
<script>
      //=======AD loop====begin====
      $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000
      });
      //=======AD loop====end====
</script>
  </body>
</html>
